<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>number</title>
</head>
<body>
  <div class="box">
    <div class="num num1"></div>
    <div class="num num2"></div>
    <div class="num num3"></div>
    <div class="num num4"></div>
  </div>
</body>
<style>
  * {
    padding: 0;
    margin: 0;
    font-size: 0;
  }
  .box {
    width: 100%;
    height: 16.6rem;
    background: url(./images/bg.png) no-repeat center 100%/100%;
    position: relative;
  }
  .num {
    width: 3.3rem;
    height: 4.3rem;
    position: absolute;
    top: 6.2rem;
    background: url(./images/0.png) no-repeat center 100%/100%;
  }
  .num1 {
    left: 2.3rem;
  }
  .num2 {
    left: 7rem;
  }
  .num3 {
    left: 11.9rem;
  }
  .num4 {
    left: 16.8rem;
  }
</style>
<script>
  function setRem() {
    const baseSize = 16; // 基准字体大小
    const designWidth = 375; // 设计稿宽度
    const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
    const fontSize = viewportWidth / designWidth * baseSize;
    document.documentElement.style.fontSize = fontSize + 'px';
}
setRem();
window.onresize = setRem;

setInterval(() => {
  let num = Math.ceil(Math.random() * 10000) + 1;
  let numArr = num.toString().split('');
  console.error(numArr);
  document.querySelectorAll('.num').forEach( item => {
    item.style.backgroundImage = `url(./images/${numArr.shift() || 0}.png)`;
  })
}, 300);
</script>
</html>